<style>
.stat{font-size:16px;padding:8px;}
.stat span{color:#FF5722; font-size:16px;font-weight:bold;}
</style>
<div class="fixed-bar">
	<div class="layui-row stat fixed-bar-form">
		<div class="layui-col-md6">待验布数：<span id="todoNum">0</span> 条，预计完成时间：<span id="planOverTime"></span></div>
		<div class="layui-col-md6" style="text-align:right">今日完成率：<span id="todayOverRate">0%</span> ，上月未完成 / 本月未完成 / 本月来料：<span id="lastMonthTodoTotalNum">0</span> 条/ <span id="thisMonthTodoTotalNum">0</span> 条/ <span id="monthTotalNum">0</span></div>
	</div>
</div>
<div class="fixed-bar">
    <form class="layui-form layui-form-pane fixed-bar-form" action="{:url('task')}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                  <input type="text" id="client_ordernum" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">布种</label>
                <div class="layui-input-inline">
                  <input type="text" id="name" name="name" lay-verify="" placeholder="输入布种" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">到料时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" lay-verify="" readonly="" id="create_date_range" placeholder="输入到料时间" class="layui-input">
                    
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" onclick="getList(1)">搜索</button>
              </div>
        </div>
    </form>
</div>
<hr class="layui-bg-green">
<div>
	<table width="100%">
		<tr>
			<td width="40%" align="center">
            未完成任务
            
      </td>
			<td style="width:3px;"></td>
			<td align="center">已完成任务 [<a href="{:url('taskDetail')}" class="hisi-iframe" hisi-data="{width: '70%', height: '500px'}">查看详情</a>]</td>
		</tr>
		<tr>
			<td valign="top">
				<table class="layui-table todo" lay-size="sm">
					<colgroup>
						<col width="60">
						<col width="100">
						<col width="60">
						<col width="100">
						<col width="80">
						<col width="60">
						<col width="100">
						<col width="80">
						<col width="60">
						<col width="100">
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>序号</th>
							<th>出货日期</th>
							<th>工序</th>
							<th>订单号</th>
							<th>总匹数</th>
							<th>布号</th>
							<th>布种</th>
							<th>颜色</th>
							<th>批色</th>
							<th>到料日期</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</td>
			<td></td>
			<td valign="top">
				<table class="layui-table done" lay-size="sm">
					<colgroup>
						<col width="60">
						<col width="100">
						<col width="60">
						<col width="100">
						<col width="80">
						<col width="60">
						<col width="100">
						<col width="80">
						<col width="100">
						<col width="80">
						<col width="60">
						<col width="60">
						<col width="60">
						<col width="100">
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>序号</th>
							<th>出货日期</th>
							<th>工序</th>
							<th>订单号</th>
							<th>总匹数</th>
							<th>布号</th>
							<th>布种</th>
							<th>颜色</th>
							<th>到料日期</th>
							<th>实用布封</th>
							<th>米长</th>
							<th>克重</th>
							<th>批色</th>
							<th>完成时间</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</td>
		</tr>
	</table>

</div>

{include file="system@block/layui" /}

<script type="text/javascript">
	layui.use([ 'table', 'jquery', 'layer', 'form', 'tool', 'code', 'laytpl', 'laydate' ], function() {
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        
        laydate.render({
		    elem: '#create_date_range'
		    ,range: '~'
		    ,theme: 'molv'
		    ,mark: {'{:$today}':''}
	    	,change: function(value, date, endDate){
		    	$('#create_date_range').val(value);
            	$('#layui-laydate1').remove();//关闭面板
            }
		});
		var updateTime = 0;
		window.getList = function(type) {
            var ordernum=name=create_time='';
            if(type==1){
                ordernum="&client_ordernum="+$('#client_ordernum').val();
                name="&name="+$('#name').val();
                create_time="&create_time="+$('#create_date_range').val();
            }
			$.ajax({
	 		   type: "POST",
	 		   url: "{:url('task')}",
	 		   data: "update_time="+updateTime+ordernum+name+create_time,
	 		   dataType:"json",
	 		   success: function(res){
	 			  if (res.code == 1) {
					 var d = res.data;
					 updateTime = d.updateTime;
					 $('#todoNum').html(d.todoNum);
					 $('#planOverTime').html(d.planOverTime);
					 $('#todayOverRate').html(d.todayOverRate);
					 $('#lastMonthTodoTotalNum').html(d.lastMonthTodoTotalNum);
					 $('#thisMonthTodoTotalNum').html(d.thisMonthTodoTotalNum);
					 $('#monthTotalNum').html(d.monthTotalNum);
	 				 
					 var html1 = '';
					 var count = d.todoList.length;
					 for (var i in d.todoList){
						 html1 += '<tr>';
						 html1 += '<td>' + (count-i) + '</td>';
						 html1 += '<td>' + d.todoList[i].shipment_time + '</td>';
						 html1 += '<td>' + d.todoList[i].type_name + '</td>';
						 html1 += '<td><span class="copy-item">' + d.todoList[i].client_ordernum + '</span></td>';
						 html1 += '<td>' + d.todoList[i].tiaoshu + '</td>';
						 html1 += '<td>' + d.todoList[i].cloth_num + '</td>';
						 html1 += '<td>' + d.todoList[i].name + '</td>';
						 html1 += '<td>' + d.todoList[i].color + '</td>';
						 html1 += '<td>' + layui.tool.formatBool(d.todoList[i].caigou_status) + '</td>';
						 html1 += '<td>' + d.todoList[i].create_time + '</td>';
						 html1 +='</tr>';
					 }
					 
					 var html2 = '';
					 var count2 = d.doneList.length;
					 for (var i in d.doneList){
						 html2 += '<tr>';
						 html2 += '<td>' + (count2-i) + '</td>';
						 html2 += '<td>' + d.doneList[i].shipment_time + '</td>';
						 html2 += '<td>' + d.doneList[i].type_name + '</td>';
						 html2 += '<td><span class="copy-item">' + d.doneList[i].client_ordernum + '</span></td>';
						 html2 += '<td>' + d.doneList[i].tiaoshu + '</td>';
						 html2 += '<td>' + d.doneList[i].cloth_num + '</td>';
						 html2 += '<td>' + d.doneList[i].name + '</td>';
						 html2 += '<td>' + d.doneList[i].color + '</td>';
						 html2 += '<td>' + d.doneList[i].create_time + '</td>';
						 html2 += '<td>' + d.doneList[i].true_fabric_width + '</td>';
						 html2 += '<td>' + d.doneList[i].length + '</td>';
						 html2 += '<td>' + d.doneList[i].true_weight + '</td>';
						 html2 += '<td>' + layui.tool.formatBool(d.doneList[i].caigou_status) + '</td>';
						 html2 += '<td>' + d.doneList[i].over_time + '</td>';
						 html2 += '</tr>';
					 }
					 $('.todo tbody').html(html1);
					 $('.done tbody').html(html2);
					 
				  } else {
				  }
	 		   }
	 		});
		}
		getList();
		setInterval('getList()', 15000);
        
	});
</script>